<script lang="ts" setup>
import { get, post, Message, loadFile } from '@/utils'
const props = withDefaults(
  defineProps<{
    multiple?: boolean
    /**请求地址 */
    api: string
    fieldNames?: { label: string; value: string }
    /**远程搜索接口请求参数key */
    searchKey: string
  }>(),
  {
    multiple: false,
    fieldNames: { label: 'name', value: 'id' },
  }
)
const emit = defineEmits(['update:val'])
const id = ref('')
const options = ref<any[]>([])
const loading = ref(false)
const handleSearch = value => {
  if (value) {
    loading.value = true
    get({ url: props.api, data: { current: 1, size: 20, [props.searchKey]: value } }).then(({ data }) => {
      options.value = data.records
      loading.value = false
    })
  } else {
    options.value = []
  }
}
</script>
<template>
  <a-select :options="options" :loading="loading" :field-names="props.fieldNames" placeholder="请输入" v-model="id" @change="$emit('update:val', id)" :style="{ width: '320px' }" @search="handleSearch" allow-search :filter-option="false" :show-extra-options="false" />
</template>
<style lang="less" scoped></style>
